#superInputContainer {
  height: auto;
  width: 92%;
  padding: 2.4vmin 4vmin;
  position: sticky;
  z-index: 3;
  top: calc(2rem + 8vmin);
  background-color: var(--onBg);
  backdrop-filter: blur(2vmin);
  border-radius: var(--roundness);
  border: var(--border);
  box-shadow: var(--shadow);
  display: flex;
  transition: all 0.4s;

  &:focus-within {
    backdrop-filter: none;
    background-color: var(--bg);
  }
}

#superInput {
  border: none;
  height: 100%;
  width: 100%;
  background: none;
  color: inherit;
  font-size: medium;

}

#superInput::placeholder {
  color: inherit;
  opacity: 75%;
}

#searchFilters {
  font-size: medium;
  max-width: 9ch;
  padding: 0;
  border: none;
  color: inherit;
  text-align: right;
  appearance: none;
}

#suggestions {
  max-height: 25vmax;
  overflow-y: scroll;
  position: absolute;
  width: 80vmin;
  z-index: 1;
  margin-top: calc(3.4rem + 12.8vmin);
  background-color: var(--bg);
  list-style-type: none;
  padding: 0;
  border-radius: 0 0 var(--roundness) var(--roundness);
  border: var(--border);
  box-shadow: var(--shadow);
  display: none;
  user-select: none;

  li {
    background-color: var(--onBg);
    font-weight: bold;
    padding: 1vmin 3vmin;
    margin-top: 0.4vmin;

    &:hover,
    &:focus,
    &.hover {
      background-color: var(--text);
      color: var(--bg);
    }
  }
}

#searchlist {
  margin-top: 8%;
  width: 92%;

}